<template>
  <div class="content">
    <div class="head">
      <div class="logo"></div>
    </div>
    <div class="dv">
      <div class="page1" @click="tabPage('pm')"></div>
      <div class="page2" @click="tabPage('bdz')"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {};
  },
  methods: {
    tabPage(name) {
      this.$router.push({ name });
    },
  },
};
</script>

<style scoped>
.content {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: url("../../static/images/index_bg.png") no-repeat;
  background-size: 100% 100%;
}
.head {
  position: absolute;
  top: 0;
  left: 0.04rem;
  width: 19.16rem;
  height: 0.75rem;
  background: url("../../static/images/logo_bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
}
.logo {
  width: 8rem;
  height: 0.4rem;
  background: url("../../static/images/index_title.png") no-repeat;
  background-size: 100% 100%;
  margin-top: 0.15rem;
}
.dv {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page1 {
  width: 4.82rem;
  height: 5.26rem;
  background: url("../../static/images/page1.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 1.5rem;
  cursor: pointer;
}
.page2 {
  width: 4.82rem;
  height: 5.26rem;
  background: url("../../static/images/page2.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
</style>
